<script setup lang="ts">
import { Ckeditor } from "@ckeditor/ckeditor5-vue"; //导入 Ckeditor 编辑器【必须】
import {
  ClassicEditor,
  Paragraph,
  SpecialCharacters,
  Undo,
  Bold,
  Italic,
  Underline,
  MediaEmbed,
} from "ckeditor5"; //引入插件【必须】
import "ckeditor5/ckeditor5.css"; //引入样式【必须】
import type { EditorConfig } from "ckeditor5"; //引入 EditorConfig 类型
import coreTranslations from "ckeditor5/translations/zh-cn.js"; //引入中文包
//设置编辑器配置项
const config: EditorConfig = {
  //使用 GPL 许可证：开源免费
  licenseKey: "GPL",
  //设置中文
  translations: [coreTranslations],
  //设置工具栏
  toolbar: {
    //工具栏选项
    items: ["undo", "redo", "|", "bold", "italic", "underline"],
  },
  //设置插件
  plugins: [
    Paragraph,
    SpecialCharacters,
    Undo,
    Bold,
    Italic,
    Underline,
    MediaEmbed,
  ],
  //内容提示文字
  placeholder: "请填写商品简介",
};
</script>
<template>
  <Ckeditor :editor="ClassicEditor" :config="config"></Ckeditor>
</template>
<style>
/* 去掉编辑器右下解，在获得焦点时，显示的"POWERED BY CKEditor" */
.ck .ck-powered-by {
  display: none !important;
}
/* 设置编辑器的宽高 */
.ck-editor__editable_inline {
  height: 200px !important;
}
/* 设置编辑器获得焦点后的边框 */
.ck-editor__editable:focus {
  border: 1px solid #ccced1 !important;
}
/* 设置编辑器获得焦点后的阴影 */
.ck-focused {
  box-shadow: none !important; /* 移除可能的阴影效果 */
}
</style>
